<template>
  <div class="infinite-container bgwhite">
      <mu-dropDown-menu :value="value" @change="handleChange" style="width:100%;">
        <mu-menu-item :value="0" title="全部"></mu-menu-item>
        <mu-menu-item :value="1" title="三级医院"></mu-menu-item>
        <mu-menu-item :value="2" title="三甲医院"></mu-menu-item>
        <mu-menu-item :value="3" title="三乙医院"></mu-menu-item>
        <mu-menu-item :value="4" title="三丙医院"></mu-menu-item>
        <mu-menu-item :value="5" title="二级医院"></mu-menu-item>
        <mu-menu-item :value="6" title="一级医院"></mu-menu-item>
        <mu-menu-item :value="7" title="二级甲等"></mu-menu-item>
        <mu-menu-item :value="8" title="一级甲等"></mu-menu-item>
      </mu-dropDown-menu>
    <mu-list class="bgwhite">
    <div v-for="h in hospitals" :key="h.name">
      <mu-list-item :title="h.name" @click="itemClick(h.id)">
        <span slot="describe">
          <i class="iconfont icon-dingwei danger"></i>{{h.address}}
        </span>
      </mu-list-item>
      <mu-divider></mu-divider>
    </div>
    <div class="no-data" v-show="nodata">暂无数据</div>
  </mu-list>
  </div>
</template>
<script>
import {getHospitalList} from '../../api/api'

export default {
  data () {
    return {
      value: 0,
      hospitals: [],
      defaultHospitals: [],
      nodata: false
    }
  },
  methods: {
    handleChange (value) {
      this.value = value
      this.hospitals = this.defaultHospitals.filter(h => {
        if (value === 0) return true
        return h.type === value
      })
      if (this.hospitals.length === 0) {
        this.nodata = true
      } else {
        this.nodata = false
      }
    },
    itemClick (id) {
      this.$router.push({
        path: '/appointment/select-department',
        query: {id: id}
      })
    }
  },
  mounted () {
    // 模拟判断获取用户完整信息
    if (!localStorage.improveUserInfo) this.$router.replace('/improve-user-info')
    this.$store.commit('UPDATE_TITLE', '挂号-选择医院')
    this.$store.commit('UPDATE_LOADING', true)
    getHospitalList().then(data => {
      if (data.data.code === 200) {
        this.defaultHospitals = data.data.Hospitals
        this.hospitals = data.data.Hospitals
      }
      this.$store.commit('UPDATE_LOADING', false)
    })
  },
  beforeDestroy () {
    this.$store.commit('UPDATE_TITLE')
  }
}
</script>

<style lang="less">
@import '../../common/css/vars.less';
.danger {
  color: @color-danger;
}
</style>
